<template>
<div>
  <el-table
    :data="tableData"
    height="80vh"
    border
    style="width: 100%">
    <el-table-column
      fixed="left"
      label="ID"
      width="30">
      <template slot-scope="scope">
        <el-checkbox @change="(val)=>{onSelectChange(val, scope.row)}"></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="tag"
      label="标签">
    </el-table-column>
    <el-table-column
      prop="clazz"
      label="分类">
    </el-table-column>
    <el-table-column
      prop="keyword"
      label="关键字">
    </el-table-column>
    <el-table-column
      prop="box"
      label="宽高">
    </el-table-column>
    <el-table-column
      prop="size"
      label="大小">
    </el-table-column>
    <el-table-column
      prop="type"
      label="类型"
      width="90">
    </el-table-column>
    <el-table-column
      prop="fullpath"
      label="文件路径">
    </el-table-column>
  </el-table>
  <el-button @click="loadImages()" type="primary" round>load</el-button>
  <el-button @click="testCorrection()" type="danger" round>testCorrection</el-button>
  <el-button @click="testAddImage()" round>testAddImage</el-button>
  <el-button @click="testRemoveImage()" round>testRemoveImage</el-button>
  <el-button @click="testAddTag()" round>testAddTag</el-button>
  <el-button @click="testRemoveTag()" round>testRemoveTag</el-button>
  <el-button @click="testAddClazz()" round>testAddClass</el-button>
  <el-button @click="testRemoveClazz()" round>testRemoveClass</el-button>
  <div class="console">{{msg}}</div>
</div>
</template>

<script>
import storage from '../../public/Kernel'
// import { ImageParser } from '../Image'
// import util from 'util'

export default {
  data() {
    return {
      msg: '',
      tableData: [],
      testImagesID: []
    }
  },
  mounted() {
    // const adapter = await navigator.gpu.requestAdapter()
    // if (adapter === undefined) {
    //   console.log('not support webgpu: 1')
    // }
    // const device = await adapter.requestDevice()
    // if (device === undefined) {
    //   console.log('not support webgpu: 2')
    // }
    // await this.loadImages()
    this.loadOtherDisplayInfo()
  },
  methods: {
    convert(arr) {
      if (!arr) return ''
      let result = []
      for (let data of arr) {
        if (data) result.push(data)
        else if (data === null) result.push('null')
        else if (data === undefined) result.push('undefined')
      }
      return result.toString()
    },
    arrayValidate(arr, msg) {
      for (let val of arr) {
        if (val === null) {
          this.msg = msg + ' :\t array contain null element'
          throw new Error(this.msg)
        }
        if (val === undefined) {
          this.msg = msg + ' :\t array contain undefined element'
          throw new Error(this.msg)
        }
      }
    },
    arrayAssert(condition, msg) {
      if (condition) return
      this.msg = msg
      throw new Error(this.msg)
    },
    onSelectChange(val, row) {
      if (val === true) {
        this.testImagesID.push(row.imageid)
      } else {
        this.testImagesID.remove(row.imageid)
      }
    },
    async loadImages() {
      // let snaps = await localStorage.getImagesSnap()
      // let data = []
      // for (let snapIdx in snaps) {
      //   let img = {imageid: snapIdx, step: snaps[snapIdx].step, name: snaps[snapIdx].name}
      //   let info = await localStorage.getImageInfo(snapIdx)
      //   console.info('loadImages', info)
      //   img.tag = this.convert(info.tag)
      //   img.keyword = this.convert(info.keyword)
      //   img.clazz = this.convert(info.category)
      //   img.fullpath = info.path
      //   img.size = info.size
      //   img.box = 'width: ' + info.width + ', height: ' + info.height
      //   img.type = info.type
      //   data.push(img)
      // }
      // this.tableData = data
    },
    loadOtherDisplayInfo() {
      let unclazzImages = storage.getUnClassifyFiles()
      let untagImages = storage.getUnTagFiles()
      let classes = storage.getClasses('/')
      this.msg = '未分类: ' + unclazzImages.length + '\n未标签: ' + untagImages.length + '\n'
      this.msg += JSON.stringify(classes)
    },
    testCorrection() {
      // await this.testAddTag('标签测试')
      // await this.testRemoveTag('标签测试')
    },
    testAddImage() {
      // const fs = require('fs')
      // const os = require('os')
      // try {
      //   let fullpath = 'F:/Image/熔岩/jr-korpa-Ud32uVNR23g-unsplash.jpg'
      //   console.info('plateform', os.platform())
      //   if (os.platform() === 'darwin') {
      //     fullpath = '/Users/v_yuanwenbin/Pictures/照片图库.photoslibrary/resources/proxies/derivatives/00/00/3/UNADJUSTEDNONRAW_thumb_3.jpg'
      //   }
      //   const info = fs.statSync(fullpath)
      //   const parser = new ImageParser()
      //   let parse = util.promisify(parser.parse)
      //   const img = await parse(fullpath, info)
      //   console.info(img)
      //   this.testImagesID.push(img.id)
      // } catch (err) {
      // }
      // await this.loadImages()
    },
    testRemoveImage() {
      // if (!this.testImagesID.length) return
      // for (let idx of this.testImagesID) {
      //   await localStorage.removeImage(idx)
      // }
      // await this.loadImages()
    },
    testAddTag(tag) {
      // if (!this.testImagesID.length) return
      // for (let idx of this.testImagesID) {
      //   await localStorage.addTag(idx, tag)
      //   const img = await localStorage.getImageInfo(idx)
      //   this.arrayValidate(img.tag, img.label + ' tag error')
      //   this.arrayAssert(img.tag.indexOf(tag) > -1, this.testImagesID[idx] + ' add tag fail')
      // }
      // await this.loadImages()
    },
    testRemoveTag(tag) {
      // if (!this.testImagesID.length) return
      // for (let idx of this.testImagesID) {
      //   await localStorage.removeTag(tag, idx)
      //   const img = await localStorage.getImageInfo(idx)
      //   this.arrayValidate(img.tag, img.label + ' tag error')
      //   this.arrayAssert(img.tag.indexOf(tag) < 0, this.testImagesID[idx] + ' remove tag fail')
      // }
      // await this.loadImages()
    },
    testAddClazz() {
      storage.addClasses(['新分类'])
      storage.updateClassName('新分类', '剑网三')
      storage.addClasses(['剑网三/万花'])
      this.loadOtherDisplayInfo()
    },
    testRemoveClazz() {
      storage.removeClasses(['剑网三'])
      this.loadOtherDisplayInfo()
    }
  }
}
</script>

<style scoped>
.console {
  margin: 5px;
  border: solid 1px black;
  color: brown;
  border-radius: 5px;
  height: 5vh;
}
</style>